<template>
  <div id="recharge">
    <div class="recharge-box">
      <NavBar
        title="充值"
        right-text="充值明细"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <div class="head-box">
        <div class="head1">1: 因为在线支付接口不稳定，目前仅支持线下转账充值！</div>
        <div class="head2">2: 请如实填写实际转载金额，否则可能导致系统审核无法通过，影响充值进度。</div>
      </div>
      <div class="body-box">
        <div class="body-text">请选择以下充值通道</div>
      </div>
    </div>
  </div>
</template>
<script>
import { NavBar } from "vant";
export default {
  components: {
    NavBar,
  },
  data() {
    return {};
  },
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },

    // 跳转充值明细
    onClickRight() {
      this.$router.push({
        path: "./rechargeinfo",
      });
    },
  },
};
</script>
<style lang="less" scoped>
#recharge {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/images/cz_bj.jpg');
  background-size: 100% 100%;
  .recharge-box {
    .head-box {
      padding-top: 20px;
      width: 90%;
      height: 100px;
      margin: 10px auto;
      border-radius: 10px;
      background-color: #fff;
      font-size: 14px;
      color: #303133;

      .head1 {
        margin: 0px 10px 0px 10px;
      }
      .head2 {
        margin: 0px 10px;
      }
    }
    .body-box {
      width: 90%;
      height: 40px;
      margin: 10px auto;
      border-radius: 10px;
      background-color: #fff;
      .body-text {
        line-height: 40px;
        font-size: 14px;
        margin-left: 10px;
      }
    }
  }
}
</style>